<!--
 * @Description: 
 * @Author: fjt
 * @Date: 2021-05-28 16:49:33
 * @LastEditTime: 2021-06-04 15:08:20
 * @LastEditors: fjt
-->
<template>
  <div class="le-login">
    <div class="le-login__content">
      <div class="le-content__body">
        <div class="le-body__icon"></div>
        <div class="le-body__form">
          <div class="le-form__item">
            <div class="le-label">手机号</div>
            <el-input
              v-model="postData.mobile"
              autocomplete="off"
              class="le-value"
            ></el-input>
          </div>
          <div class="le-form__item">
            <div class="le-label">密码</div>
            <el-input
              v-model="postData.password"
              autocomplete="off"
              type="password"
              class="le-value"
              @keydown.enter.native="submitForm"
            ></el-input>
          </div>
          <el-button
            class="le-login-submit"
            :disabled="disabled"
            @click="submitForm()"
            >登录</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
import { createNamespacedHelpers } from "vuex";
const { mapActions } = createNamespacedHelpers("setting");

export default {
  data() {
    return {
      postData: {
        mobile: "",
        password: "",
      },
    };
  },
  computed: {
    disabled: function () {
      return !(this.postData.mobile && this.postData.password);
    },
  },
  methods: {
    ...mapActions(["getSettingInfo"]),
    submitForm() {
      if (this.disabled) return;
      this.$heshop
        .login("post", this.postData)
        .then((data) => {
          console.log(data);
          this.$store.commit("apply/login", data);
          this.getSettingInfo();
          setTimeout(() => {
            this.$router.push({ path: `/panel/index` }).catch((error) => {
              console.error("路由跳转错误", error);
            });
          }, 1000);
        })
        .catch((err) => {
          if (err.data && err.data.message) {
            this.$message.error(err.data.message);
          } else {
            this.$message.error("系统出错");
          }
        });
    },
  },
};
</script>
<style lang="less" scoped>
@import "./login.less";
</style>